<template>
  <div class="order-item">
       <!-- 收货地址 -->
    <van-cell is-link class="shippingadd" @click="isShippingAddShow = true" v-for="(item1, i) in list.consignee" :key="i">
      <p>收货地址:</p>
      <span>{{item1.address}}</span>
      <div>
        <span>联系人: {{item1.name}}</span>
        <span>联系电话: {{item1.mobile}}</span>
      </div>
    </van-cell>
    <!-- 修改地址弹出层 -->
    <van-popup v-model="isShippingAddShow" position="left" :style="{ width: '100%', height: '100%' }">
      <usual-address @close="isShippingAddShow=false" :addressId="list.id"></usual-address>
    </van-popup>
     <!-- 商铺信息 -->
    <van-cell class="store-cell" v-for="(item2, i) in list.Store" :key="i">
      <div class="store-log">
        <img src="../../../../assets/1.png" alt="">
        <p>{{item2.doorNumber}}</p>
      </div>
      <div class="store-details">
        <p>{{item2.name}}</p>
        <span>{{item2.mobile}}</span>
        <span>距离 : {{item2.distance}}</span>
        <p>
          <van-icon size="20" color="#1989fa" name="location" />
          {{item2.address}}</p>
      </div>
    </van-cell>
    <!-- 选购商品 -->
    <van-cell class="commodity">
      <p>选购商品:</p>
      <van-swipe-cell v-for="(item3, i) in list.commodity" :key="i">
        <van-card
          :num="item3.num"
          :price="item3.u_price"
          :title="item3.name"
          class="goods-card"
          thumb="https://img.tukuppt.com//png_preview/00/34/50/fAhoTvzPr0.jpg!/fw/780"
        />
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <!-- <van-swipe-cell>
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          class="goods-card"
          thumb="https://img.tukuppt.com//png_preview/00/34/50/fAhoTvzPr0.jpg!/fw/780"
        />
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <van-swipe-cell>
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          class="goods-card"
          thumb="https://img.tukuppt.com//png_preview/00/34/50/fAhoTvzPr0.jpg!/fw/780"
        />
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell> -->
    </van-cell>
    <van-cell title="包装" value="￥2" />
    <van-cell title="活动优惠" value="满50-2 -￥2" />
    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <van-cell title="配送费" value="配送上门 ￥2" />
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
  </div>
</template>

<script>
import UsualAddress from './address/usual-address'
import { getItem } from '@/api/order.js'
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
}
export default {
  name: 'OrderItem',
  components: {
    UsualAddress
  },
  props: {
    type: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      isShippingAddShow: false,
      list: {}
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getOrder()
  },
  mounted () {
  },
  methods: {
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      this.coupons.push(coupon)
    },
    async getOrder () {
      try {
        const { data } = await getItem(this.type)
        console.log(data)
        // this.list = data
        data.forEach(num => {
          this.list = num
          console.log(this.list)
        })
      } catch (err) {
        this.$toast('获取列表失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.order-item{
  p {
      margin: 0;
    }
  .van-cell {
    border-top: 1px solid #02b6fd;
    .right {
      float: right;
      .van-button {
        height: 45px;
        border-radius: 20px;
      }
    }
    div span {
      margin-left: 20px;
    }
  }
  .commodity {
    .van-button--danger {
      margin-top: 60px;
    }
  }
  .shippingadd {
    span {
      margin-left: 50px !important;
    }
    .van-cell__right-icon {
      line-height: 140px;
      font-size: 50px;
    }
  }
  .store-cell {
    .store-log {
      width: 140px;
      float: left;
      text-align: center;
      margin: 0px;
      img {
        width: 100%;
        border-radius: 50%;
        border: 10px solid #02b6fd;
      }
    }
    /deep/.store-details {
      width: 500px;
      line-height: 70px;
      float: right;
      span {
        margin: 0 !important;
        margin-right: 40px !important;
      }
    }
  }
}
</style>
